<template>
  <div>
   <main>
     <Button type="primary" ref="buttonRef">
       111111
     </Button>
     <Button plain> plain button </Button>
     <Button round> round button </Button>
     <Button circle> circle button </Button>
    <Button type="primary">Primary</Button>
    <Button type="success">Success</Button>
    <Button type="info">Info</Button>
    <Button type="warning">Warning</Button>
    <Button type="danger">Danger</Button><br/><br/>
    <Button type="primary" plain>Primary</Button>
    <Button type="success" plain>Success</Button>
    <Button type="info" plain>Info</Button>
    <Button type="warning" plain>Warning</Button>
    <Button type="danger" plain>Danger</Button><br/><br/>
    <Button size="large">Large</Button>
    <Button size="small">Small</Button><br/><br/>
    <Button size="large" loading>Loading</Button>
    <Button size="large" icon="arrow-up">Icon</Button><br/><br/>    

   </main>
    <a href="#">link</a>
  </div>

</template>
<script setup lang="ts">
import Button from './components/Button/Button.vue'
import type {ButtonInstance} from './components/Button/type.ts'
import {ref, onMounted} from "vue";

const buttonRef = ref<ButtonInstance | null>(null);

onMounted(() => {
  if (buttonRef.value) {
    console.log("buttonRef", buttonRef.value.ref)
  }
})
</script>

<style scoped>

</style>
